<template>
  <div class="login_dialog_container">
    <div class="dialog">
      <div class="title_box">
        <div>Apply For Access</div>
        <img @click="closeDialog" src="@/assets/common/close.png">
      </div>
      <div class="form_area">
        <div class="desc">
          您正在申请浏览传播更多信息的权限，确认申请后平台将为您审核，信息通知请留意消息中心
        </div>
        <div class="form_item">
          <textarea v-model="applyDto.applyReason" class="custom-textarea" placeholder="Please enter your reasons for access"></textarea>
        </div>
      </div>
      <button @click="toApplyLevel3Permission">Submit</button>
    </div>

    <div class="mask"></div>
  </div>
</template>

<script setup>
import {ref, reactive} from "vue";
import ShipApI from "@/api/ship/index.js";
import {ResultEnum} from "@/enums/ResultEnum.js";

//处理传进来的船舶id数据
const props = defineProps({
  //船舶id
  sid: {
    type: String,
    default: null,
  }
});

// 定义要触发的事件
const emit = defineEmits(['close']);

// 触发父组件关闭事件
function closeDialog() {
  emit('close')
}

//申请权限dto
const applyDto = ref({
  sid:"",
  applyReason:""
})

//提交申请三级
async function toApplyLevel3Permission(){
  if(!props.sid){
    ElMessage.warning("船舶信息不全")
    return
  }else{
    applyDto.value.sid = props.sid
  }
  let res = await ShipApI.applyLevel3Permission(applyDto.value)
  if(res.code == ResultEnum.SUCCESS){
    //申请成功 等待审核
    ElMessage.success("申请三级权限成功 请等待审核")
    //关闭弹窗
    emit('close')
  }
}
</script>

<style lang="scss" scoped>
.login_dialog_container {
  padding: 24px;
  background-color: #fff;
  border-radius: 24px;
}

.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 20;
  padding: 24px;
  border-radius: 24px;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .4);
  width: 100%;
  height: 100%;
  z-index: 10;
}

.title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
  color: #1C1E24;

  img {
    width: 24px;
    height: 24px;
  }
}

.form_area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 432px;

  .desc {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: normal;
    color: #808690;
    margin-top: 4px;
  }

  .form_item {
    margin-top: 16px;
    width: 100%;

    .custom-textarea{
      width: 100% !important;
      height: 158px;
      padding: 12px 16px;
      resize: vertical; /* 允许垂直调整大小 */
      border-radius: 8px;
      background: #F0F2F7;
      font-size: 16px;
      line-height: 24px;
      color:#1C1E24;
    }

    .label {
      font-size: 16px;
      font-weight: normal;
      line-height: 24px;
      letter-spacing: normal;
      color: #808690;
      margin-bottom: 8px;
    }

    .value {
      background: #F0F2F7;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: normal;
      color: #1C1E24;
      height: 40px;
      border-radius: 8px;

      input {
        width: 100%;
        border: none;
        outline: none;
        background: none;
        box-shadow: none;
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 8px 12px;
        border-radius: 8px;
      }

      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }

      ::v-deep .el-select__wrapper {
        padding: 6px 12px !important;
        box-sizing: border-box;
        border-radius: 8px;
        background: #F0F2F7;
        box-shadow: none;
        font-size: 14px;
        line-height: 20px;
        color: #808690;

        ::v-deep .el-select__selection .el-select__selected-item .el-select__selected-item span {
          color: pink !important;
        }
      }


      .el-select-dropdown-item {
        // 修改当前选中选项的文字显示颜色
        color: pink !important;
      }
    }
  }

  form_item:first-child {
    margin-top: 0;
  }

  .half {
    width: 48%;
  }
}

.text_box {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-align: right;
  letter-spacing: normal;
  justify-content: center;
  color: #1C1E24;
  margin-top: 24px;
}

.green_text {
  color: #1e90ff;
  margin-left: 8px;
}

button {
  border-radius: 8px;
  background: #1e90ff;
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  letter-spacing: normal;
  color: #FFFFFF;
  width: 100%;
  padding: 8px 16px;
  margin-top: 24px;
}
</style>
